<!--
 * @Author: 张俊辉 zhangjunhui@mangocosmos.com
 * @Date: 2025-05-09 18:10:00
 * @LastEditors: 张俊辉 zhangjunhui@mangocosmos.com
 * @LastEditTime: 2025-05-09 18:55:24
 * @FilePath: \threejs_dome\src\components\room.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <canvas id="container" width="1500px" height="800px"></canvas>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
export default {
  name: 'room',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    const canvas = document.querySelector('#container')
    const renderer = new THREE.WebGLRenderer({ canvas })

    const fov = 40
    const aspect = 2
    const near = 0.1
    const far = 1000
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
    camera.position.set(0, 50, 0)
    camera.up.set(0, 0, 1)

    const scene = new THREE.Scene()
    const materials = []
    const textureLeft = new THREE.TextureLoader().load('/left.jpg')
    // 校准贴图位置摆放
    textureLeft.center.set(0.5, 0.5) // 表示在中心点位置旋转
    textureLeft.rotation = -Math.PI / 2
    materials.push(new THREE.MeshBasicMaterial({ map: textureLeft }))

    const textureRight = new THREE.TextureLoader().load('/floor.jpg')
    textureRight.center.set(0.5, 0.5)
    textureRight.rotation = Math.PI / 2
    materials.push(new THREE.MeshBasicMaterial({ map: textureRight }))

    const textureTop = new THREE.TextureLoader().load('/top.jpg')
    materials.push(new THREE.MeshBasicMaterial({ map: textureTop }))

    const textureBottom = new THREE.TextureLoader().load('/floor.jpg')
    textureBottom.center.set(0.5, 0.5)
    textureBottom.rotation = Math.PI
    materials.push(new THREE.MeshBasicMaterial({ map: textureBottom }))

    const textureFront = new THREE.TextureLoader().load('/qian.jpg')
    materials.push(new THREE.MeshBasicMaterial({ map: textureFront }))
    textureFront.center.set(0.5, 0.5)
    textureFront.rotation = Math.PI

    const textureBack = new THREE.TextureLoader().load('/hou.jpg')
    // 创建材质
    materials.push(new THREE.MeshBasicMaterial({ map: textureBack }))
    // 创建网络
    const box = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 60), materials)
    scene.add(box)
    box.geometry.scale(1, 1, -1)
    new OrbitControls(camera, renderer.domElement)

    function animate() {
      renderer.render(scene, camera)

      requestAnimationFrame(animate)
    }
    animate()
  }
}
</script>
